<template>
  <div class="wrapper">
    <div class="nav-bar">
      <wxc-icon :style="{fontSize:'60px'}" name="back" @wxcIconClicked="gotoPrevMonth"></wxc-icon>
      <text class="calendar-title">{{year}}年{{month}}月</text>
      <wxc-icon :style="{fontSize:'60px'}" name="more" @wxcIconClicked="gotoNextMonth"></wxc-icon>
    </div>
    <div class="calendar-weekday">
      <text class="weekday-text"
            :key="k"
            v-for="(week,k) in weeks">{{week}}</text>
    </div>
    <cslider ref="slider" class="slider" @change="changeSlide" index="0" show-indicators="false" infinite="true">
      <div class="month" v-for="(rows, i) in months" :key="i">
        <div class="week-row" v-for="(row, ri) in rows" :key="ri">
          <div class="day-cell"  v-for="(day, di) in row" :key="di">
            <text class="day-text" :class="day.cls">{{day.text}}</text>
          </div>
        </div>
      </div>
    </cslider>
    <wxc-button text="Go to date 2019-10"
        @wxcButtonClicked="gotoMonth('2019/10/1')"></wxc-button>
    <wxc-button text="Go to date 2017-10" type="blue"
        @wxcButtonClicked="gotoMonth('2017/10/1')"></wxc-button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import { getWeekRows } from './date'
import { WxcIcon, WxcButton } from 'weex-ui'

let navigator = weex.requireModule('navigator')
let modal = weex.requireModule('modal')

export default {
  name: 'App',
  components: {
    HelloWorld,
    WxcIcon,
    WxcButton,
  },
  data () {
    return {
      year: '',
      month: '',
      monthsIndex: [],
      now: null,
      weeks: [],
      startDay: 1,
      index: 0,
    }
  },
  created() {
    const weeks = ['日', '一', '二', '三', '四', '五', '六'];
    const newWeeks = [];
    for (let i = this.startDay, j = 1; j <= 7; j++ ) {
      newWeeks.push(weeks[i]);
      i = (i + 1) % 7;
    }
    const now = new Date();
    this.now = new Date(now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate());
    this.weeks = newWeeks;
    this.year = now.getFullYear();
    this.month = now.getMonth() + 1;
    this.monthsIndex = [this.getCurrentMonthIndex(), this.getNextMonthIndex(), this.getPrevMonthIndex()];
  },
  computed: {
    activeMonth() {
      const monthIndex = this.monthsIndex[0];
      const days = getWeekRows(monthIndex.year, monthIndex.month, this.now, this.startDay);
      return days;
    },
    prevMonth() {
      const monthIndex = this.monthsIndex[2];
      const days = getWeekRows(monthIndex.year, monthIndex.month, this.now, this.startDay);
      return days;
    },
    nextMonth() {
      const monthIndex = this.monthsIndex[1];
      const days = getWeekRows(monthIndex.year, monthIndex.month, this.now, this.startDay);
      return days;
    },
    months() {
      return [this.activeMonth, this.nextMonth, this.prevMonth];
    },
  },
  methods: {
    changeSlide(e) {
      let index = e.index;
      this.index = index;
      console.log(`click slide change: ${index}`);
      const monthIndex = this.monthsIndex[index];
      this.year = monthIndex.year;
      this.month = monthIndex.month;
      this.$set(this.monthsIndex, (index + 2) % 3, this.getPrevMonthIndex(this.year, this.month));
      this.$set(this.monthsIndex, (index + 1) % 3, this.getNextMonthIndex(this.year, this.month));
    },
    getCurrentMonthIndex() {
      return {
        year: this.year,
        month: this.month,
      };
    },
    getPrevMonthIndex(year, month) {
      if (month === 1) {
        month = 12;
        year--;
      } else {
        month--;
      }

      return {
        year,
        month,
      };
    },
    getNextMonthIndex(year, month) {
      if (month === 12) {
        month = 1;
        year++;
      } else {
        month++;
      }

      return {
        year,
        month,
      };
    },
    gotoPrevMonth() {
      const index = (this.index + 2) % 3;
      console.log(`click prev: ${this.index} => ${index}`);
      this.$refs.slider.showPrev();
    },
    gotoNextMonth() {
      const index = (this.index + 1) % 3;
      console.log(`click next: ${this.index} => ${index}`);
      this.$refs.slider.showNext();
    },
    gotoMonth(dateStr) {
      const date = new Date(dateStr);
      const toYear = date.getFullYear();
      const toMonth = date.getMonth() + 1;
      if (toYear !== this.year || toMonth !== this.month) {
        if (toYear > this.year || (toYear === this.year && toMonth > this.month)) {
          //
          // this.year = toYear;
          // this.month = toMonth;
          // const currentMonthIndex = this.getPrevMonthIndex(toYear, toMonth);

          // this.$set(this.monthsIndex, (index + 2) % 3, this.getPrevMonthIndex());
          this.$set(this.monthsIndex, (this.index + 1) % 3, {
            year: toYear,
            month: toMonth,
          });
          this.$refs.slider.showNext();
        } else {
          this.$set(this.monthsIndex, (this.index + 2) % 3, {
            year: toYear,
            month: toMonth,
          });
          this.$refs.slider.showPrev();
        }
      }

    },
  }
}
</script>

<style scoped>
  .wrapper {
    width: 750px;
    align-items: center;
    justify-content: flex-start;
  }

  .nav-bar {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .calendar-title {
    font-size: 50px;
  }

  .calendar-weekday {
    width: 750px;
    height: 60px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .weekday-text {
    flex: 1;
    text-align: center;
    font-size: 40px;
  }

  .slider {
    width: 750px;
    height: 700px;
  }

  .month {
    width: 750px;
    background-color: rgb(139, 34, 34);
  }
  .week-row {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .day-cell {
    flex: 1;
    padding: 20px 0;
    align-items: center;
  }

  .day-text {
    font-size: 40px;
    width: 80px;
    height: 80px;
    padding: 5px;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
  }

  .calendar-today {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    border-radius: 40px;
    color: #000000;
  }

  .day-next-month,
  .day-prev-month {
    color: #aaaaaa;
  }
</style>
